<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ReTask demo (反复任务)</title>
<script type="text/javascript" src="js/ReTask.js"></script>
<style>
/*********************************公用*********************************/
body,h1,h2,h3,h4,h5,h6,hr,p,dl,dt,dd,ul,ol,li,pre,form,th,td{
	margin: 0px;
	padding: 0px;
}
body {
	FONT: 14px/1.5 Arial, Helvetica, "SimSun", san-serif;
	COLOR: #333;
}
ul,ol,li{list-style:none;}
img{ border:0px;}

/*清除css浮动*/
.clearfix:after {
	DISPLAY: block; HEIGHT: 0px; VISIBILITY: hidden; CLEAR: both; CONTENT: "."
}

.clear{clear:both;height:0px;overflow:hidden;}

/*********************************专用*********************************/

.container{/*容器*/
	margin:0 auto;
}
.packing{padding:1px;} /*包装（容器里的第二层包装，例如：增加第二层DIV来设置PADDING是为了防止外层DIV被撑大）*/
.packing ul{ width:100%; overflow:hidden}
.packing li{ width:100%; height:30px; line-height:30px;}
.packing li span{width:100px;display:-moz-inline-box;display:inline-block;}<!--这两个设置可完美解决SPAN宽度无效的问题：display:-moz-inline-box;display:inline-block;-->
</style>
</head>
<body>

<div class="container" style=" width:998px;border:1px solid #CCC; margin-top:10px;">
  <div class="packing">
    <ul>
      <li style="padding-left:10px; ">任务状态：<span id="task_status"></span></li>
    </ul>
  </div>
</div>

<div class="container" style=" width:998px;border:1px solid #CCC; margin-top:10px;">
  <div class="packing">
    <ul>
      <li>
        <input id="start" type="button" value="开始"/>
        <input id="button_stop" type="button" value="停止"/>
      </li>
    </ul>
  </div>
</div>

<script language="javascript">

var rt = new ReTask();

rt.onInfo = function(info){
	console.log(info);
}

rt.onTask = function(){
	console.log("任务开始执行！");

	//因为这是调用示例，此处用setTimeout延时来模拟这个任务的执行耗时
	setTimeout(function(){
		console.log("任务执行完毕！");
		rt.next();
		//或 rt.next(500);//可以多加一个参数delay ，如不设置此参数默认为构造时的period
	}, 1000);
}

rt.onStatus = function(status){
	document.getElementById("task_status").innerHTML = status;
}

document.getElementById("start").onclick = function(){
	rt.run();
}

document.getElementById("button_stop").onclick = function(){
	rt.stop();
}

</script>
</body>
</html>